if sidebar is bottom
  @import "sidebar-bottom"
else
  @import "sidebar-aside"

.widget
  @extend $base-style
  line-height: line-height
  word-wrap: break-word
  font-size: 0.9em
  ul, ol
    list-style: none
    margin: 0
    ul, ol
      margin: 0 20px
    ul
      list-style: disc
    ol
      list-style: decimal

.category-list-count
.tag-list-count
.archive-list-count
  padding-left: 5px
  color: color-grey
  font-size: 0.85em
  &:before
    content: "("
  &:after
    content: ")"

.tagcloud
  a
    margin-right: 5px
    display: inline-block

.sidebar
  z-index: 999
  position: fixed
  bottom: 300px
  right: calc(50% - 525px)
  div
    display: block
    cursor: pointer
    width: 48px
    height: 48px
    text-align: center
    line-height: 48px
    border-radius: 50%
    background: main-color
    color: #fff
    margin-bottom: 5px
    transition: .4s ease-in-out
    box-shadow: 0 3px 10px rgba(0,0,0,0.16), 0 3px 10px rgba(0,0,0,0.23)
    i
      font-size: 1.5em
      line-height: 2.45em
    &:hover
      opacity: .8
      box-shadow: 0 4px 10px rgba(0,0,0,0.09), 0 4px 10px rgba(0,0,0,0.17)
      text-shadow: 0 1px darken(color-link, 20%)
.sidebar-menu-box
  height: 0
  opacity: 1
  position: fixed
  bottom: 0
  left: 0
  width: 100%
  overflow: hidden
  background: rgba(0,0,0,0.17)
  .sidebar-menu-box-container
    max-width: (column-width + gutter-width) * columns + gutter-width
    margin: 0 auto
  .sidebar-menu-box-close
    position: absolute
    top: 0
    right: 15px
    font-size: 48px
    color: #777!important
    text-decoration: none!important
    &:hover
      color: main-color!important
#sidebar-menu-box-tags
  @extend $tags-style
  display: inline-block
  max-height: 162px
  overflow-y: auto
  a
    color: #fff
    display: inline-block
    text-decoration: none
    font-weight: normal
    font-size: 10px
    height: 21px
    line-height: 21px
    float: left
    padding: 0 5px 0 10px
    position: relative
    border-radius: 0 5px 5px 0
    margin: 5px 15px 5px 8px
    &:hover
      opacity: 0.8
    &:before
      content: " "
      width: 0px
      height: 3px
      position: absolute
      top: 0
      left: -18px
      border: 9px solid transparent
    &:after
      content:" "
      width:4px
      height:4px
      background-color:#fff
      border-radius:4px
      box-shadow:0px 0px 0px 1px rgba(0,0,0,.3)
      position:absolute
      top: 9px
      left: 2px
#sidebar-menu-box-categories
  @extend $tags-style
  display: inline-block
  a
    color: #fff
    display: inline-block
    text-decoration: none
    font-weight: normal
    font-size: 10px
    height: 21px
    line-height: 21px
    float: left
    padding: 0 5px 0 10px
    position: relative
    border-radius: 5px
    margin: 5px 15px 5px 8px
    &:hover
      opacity: 0.8
#sidebar-top
  display: none

//search
.search-wrap
  position: fixed
  top: -100px
  left: 50%
  margin-left: -240px
  z-index: 998
  width: 400px
  padding: 30px
  background: #fff
  opacity: 0
  box-shadow: 5px 5px 10px rgba(0,0,0,.3)
  transition: all .5s
  .search-field
    padding: 10px
    width: 360px
    border: 0
    color: #666
    font-weight: normal
    background: #f1f1f1
    transition: background .3s
  .search-field
    &:focus
      background: #e8e8e8
  #search-submit
    color: main-color
    width: 33px
    height: 33px
    position: absolute
    right: 48px
    top: 31px
    text-align: center
    line-height: 33px
    i
     font-size: 20px
  .search-submit
    &:hover
      opacity: .8
  .search-close
    position: absolute
    top: 0
    right: 0
    display: block
    padding: 1px 10px
    font-size: 20px
    background: #e8e8e8
    color: #666
    cursor: pointer
  .search-close
    &:hover
      background: main-color
      color: #fff
.search-container
  position: absolute
  left: 6.6%
  top: 71%
  z-index: 999
  width: 380px
  max-height: 215px
  overflow-y: auto
  background: #fff
  border-radius: 2px
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12)
  opacity: 0
  visibility: hidden
  -webkit-transform: translateY(-50%) scale(.5)
  transform: translateY(-50%) scale(.5)
  -webkit-transition: .3s ease-in
  transition: .3s ease-in
.search-container-show
  opacity: 1
  visibility: visible
  -webkit-transform: none
  transform: none
.search-result
  margin: 0
  padding: 0
  .search-result-item
    line-height: 1.6em
    padding: 10px
    border-bottom: 1px solid #dadada
    @extend $ellipsis
    .search-item-li
      color: main-color
      text-decoration: none
      font-size: 16px
  .search-result-item-tips
    padding: 10px
    line-height: 1.6em
#search-tpl
  display: none
.mobile-header-menu-container
  @media mq-normal
    display: none
.mobile-header-tag-container
  @media mq-normal
    display: none